<template>
  <view class="ver-layout">
    <block v-if="suggestList.length>0">
      <view v-for="(item,index) in suggestList" :key="index" class="suggest-item ver-layout">
        <view class="hor-layout-center">
          <view class="suggest-key">投诉建议</view>
          <view class="suggest-title">{{ item.type_title }}</view>
        </view>
        <view class="suggest-item-content hor-layout-center">
          <view class="suggest-key">学生名称</view>
          <view class="suggest-desc">{{ item.student_name }}</view>
        </view>
        <view class="suggest-item-content hor-layout-center">
          <view class="suggest-key suggest-content">反馈时间</view>
          <view class="suggest-content">{{ item.created_at ? item.created_at : '--' }}</view>
        </view>
        <view class="suggest-item-content hor-layout-center">
          <view class="suggest-key suggest-content">备注</view>
          <view class="suggest-content">{{ item.description ? item.description : '--' }}</view>
        </view>
      </view>
      <u-loadmore margin-top="15" v-if="loadingObj.status" :status="loadingObj.status"/>
    </block>
    <view v-else class="list-no-data"></view>
  </view>
</template>

<script>
import {SuggestBackApi} from "@/api/askBreak.js"

let engine = new SuggestBackApi()
export default {
  name: "suggestBack",
  data() {
    return {
      suggestList: [{},{}],
      loadingObj: {
        status: '',
        current: 1,
        total: ''
      },
    }
  },
  onLoad() {
    // this.refreshData()
  },
  onReachBottom(e) {
    this.loadMore()
  },
  methods: {
    getSuggestList() {
      engine.getSuggestList(this.loadingObj.current).then(res => {
        this.suggestList = this.suggestList.concat(res.data)
        this.loadFinish(res.total)
      })
    },
    refreshData() {
      this.loadingObj.current = 1
      this.loadingObj.status = ''
      this.suggestList = []
      this.getSuggestList()
    },
    loadMore() {
      if (this.loadingObj.current >= this.loadingObj.total) {
        this.loadingObj.status = 'nomore'
      } else {
        this.loadingObj.status = 'loading'
        this.loadingObj.current = this.loadingObj.current + 1
        this.getSuggestList()
      }
    },
    loadFinish(total) {
      this.loadingObj.total = Math.ceil(total / 10)
      this.loadingObj.status = ''
      if (this.loadingObj.current >= this.loadingObj.total
          && this.suggestList.length > 0) {
        this.loadingObj.status = 'nomore'
      }
    },
  }
}
</script>

<style>
page {
  background: #F2F2F2;
}

.suggest-item {
  padding: 27px 12px;
  padding-right: 22px;
  margin-top: 18px;
  width: 100%;
  background: #FFFFFF;
}

.suggest-item-content {
  margin-top: 14px;
}

.suggest-key {
  width: 60px;
  margin-right: 13px;
  text-align: right;
  font-size: 14px;
  line-height: 14px;
  color: #666666;
}

.suggest-title {
  line-height: 14px;
  font-size: 14px;
  color: #222222;
}

.suggest-desc {
  line-height: 14px;
  font-size: 14px;
  color: #555555;
}

.suggest-content {
  line-height: 12px;
  font-size: 12px;
  color: #666666;
}
</style>
